<template>
  <div class="myOrder">
    <!-- 导航栏 -->
    <van-nav-bar :title="$t('mine.myOrder')" left-arrow @click-left="$router.back()" />
    <!-- Tab标签页 -->
    <van-tabs
      @click="orderChange"
      v-model="active"
      title-active-color="#28BE57"
      animated
      :swipe-threshold="5"
    >
      <van-tab :title="$t('mine.itemsTitle[0]')" name="-1">
        <div class="noDataPlaceHold">
          <img src="../../../assets/image/order/dingdan.jpeg" alt />
          <span class="desc">{{ $t('mine.feedbackTip') }}</span>
        </div>
      </van-tab>
      <van-tab class="pay" :title="$t('mine.itemsTitle[1]')" name="0">
        <div class="noDataPlaceHold">
          <img src="../../../assets/image/order/dingdan.jpeg" alt />
          <span class="desc">{{ $t('mine.feedbackTip') }}</span>
        </div>
      </van-tab>
      <van-tab :title="$t('mine.itemsTitle[2]')" name="1">
        <div class="noDataPlaceHold">
          <img src="../../../assets/image/order/dingdan.jpeg" alt />
          <span class="desc">{{ $t('mine.feedbackTip') }}</span>
        </div>
      </van-tab>
      <van-tab :title="$t('mine.itemsTitle[3]')" name="2">
        <div class="noDataPlaceHold">
          <img src="../../../assets/image/order/dingdan.jpeg" alt />
          <span class="desc">{{ $t('mine.feedbackTip') }}</span>
        </div>
      </van-tab>
      <van-tab :title="$t('mine.waitingFeedback')" name="3">
        <div class="noDataPlaceHold">
          <img src="../../../assets/image/order/dingdan.jpeg" alt />
          <span class="desc">{{ $t('mine.feedbackTip') }}</span>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: '-1'
    }
  },
  methods: {
    orderChange () {}
  },
  created () {
    // 接收路由参数
    this.active = this.$route.query.active
  }
}
</script>

<style lang="less">
#app {
  margin-bottom: 0;
}
.myOrder {
  background-color: #f6f6f6;
  .van-tabs__line {
    background-color: #28be57;
  }

  .noDataPlaceHold {
    width: 100%;
    min-height: 550px;
    text-align: center;
    img {
      width: 100%;
      height: 100%;
    }
    .desc {
      color: grey;
      font-size: 0.6rem;
    }
  }
}
</style>
